<link href="https://cdn.bootcss.com/picnic/6.5.0/picnic.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/picnic/6.5.0/plugins.min.css" rel="stylesheet">

<link href="http://meiju.hearu.top/dtree/dtree.css" rel="stylesheet">
<script src="http://meiju.hearu.top/dtree/dtree.js"></script>
<div class="flex">
    <div style="text-align: center" id="detail" data-rootid="<?= $detail['id'] ?>">
        <h3><?= $detail['content'] ?></h3>
    </div>

</div>
<div style="text-align: right; margin: 3px">
    <label class="button shyButton" onclick="replay(this)" for="popup" data_fatherid="0">回复该话题</label>
</div>

<div class="flex" >

    <script>
        d = new dTree('d');
        d.config.useIcons = false;
        d.config.closeSameLevel = true;
        d.config.inOrder = true;
        d.config.useCookies = false;
        d.config.useSelection = false;

        var rootid = document.getElementById('detail').getAttribute('data-rootid');
        $.get('http://meiju.hearu.top/allReplayList_'+ rootid , function (msg) {
            console.log(msg);

            if (msg.data.length > 1) {
                for (var i=0; i< msg.data.length; i++) {
                    var info = msg.data[i];
                    d.add1(info.currentId, info.preId, info.name, 'replay(this)', 'popup', {data_fatherid:info.id});
                }
                document.getElementById('replay_tree').innerHTML = d;
                d.closeAll();
                d.openTo(1);
            } else {

            }
        });
    </script>
    <div id="replay_tree"></div>

</div>
<div class="modal">
    <input id="popup" type="checkbox" />
    <label for="popup" class="overlay"></label>
    <article>
        <header>
            <h3>回复</h3>
            <label for="popup" class="close">&times;</label>
        </header>
        <section class="content">
            <input type="hidden" value="" name="fatherid">
            <input type="hidden" value="" name="rootid">
            <textarea placeholder="" name="content"></textarea>
        </section>
        <footer>
            <a class="button" onclick="post_replay()">写好了</a>
            <label for="popup" class="button dangerous">取消</label>
        </footer>
    </article>
</div>

<!--<div id="list_note_icon" onclick="goNoteList()"></div>-->
<script>
    function goNoteList() {
        window.location = "http://meiju.hearu.top/discuss";
    }

    //显示回复弹窗
    function replay(obj) {
        var fatherid = obj.getAttribute('data_fatherid');
        var info = {fatherid:fatherid, rootid:rootid};

        $("input[name='fatherid']").val(info.fatherid);
        $("input[name='rootid']").val(info.rootid);

    }

    //提交回复
    function post_replay() {
        var info = {
            rootid: $("input[name='rootid']").val(),
            fatherid: $("input[name='fatherid']").val(),
            content: $("textarea[name='content']").val()
        };

        //关闭回复弹窗
        $("#popup").click();

        $.post('http://meiju.hearu.top/addReplay', info, function (msg) {
            console.log(msg);
        });
    }
</script>
